<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>大数据可视化大屏</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/CountUp.js/2.0.7/countUp.min.js"></script>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: url('{{ url_for('static', filename='images/background2.png') }}') no-repeat center center fixed;
            background-size: cover;
            font-family: Arial, sans-serif;
        }

      .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            height: 100vh;
        }
        .top-row {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 0.5fr 1.5fr; /* 上左:1fr | 上中:0.5fr | 上右:1.5fr */
            width: 100%;
        }

      .block {
            border: 1px solid transparent;
            box-sizing: border-box;
            padding: 10px;
            overflow: hidden;
        }

        /* 中心块 */
      .center-block {
            grid-column: 2 / span 1;
            grid-row: 2 / span 1;
        }

        /* 新增样式 */
      .data-display {
            background: transparent;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
        }


        .data-point {
            font-size: 48px;
            color: #B22222; /* 将数字颜色设置为红色 */
        }
        .white-text {
            color: #fff;
        }
    </style>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <!-- 引入 Socket.IO 客户端库 -->
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
</head>

<body>
    <div class="container">

         <div class="top-row">
        <!-- 上左 运力预测-->
        <div id="main" class="block"></div>
        <!-- 上中 -->
        <div id="main2" class="block">
            <div class="data-display" id="incidentData">
                <p class="data-point" id="eventCount">0</p>
                <div class="white-text">当日起架次</div>
            </div>
        </div>
        <!-- 上右 滚动大屏-->
        <div id="main3" class="block"></div>
        </div>
        <!-- 中左 每月运力统计-->
<div id="main4" class="block" style="width: 100%; height: 100%;"></div>
        <!-- 中心 -->
        <div id="map" class="block center-block"></div>
        <!-- 中右 航班延迟原因-->
        <div id="main5" class="block"></div>
        <!-- 下左 航班类型统计-->
        <div id="main6" class="block"></div>
        <!-- 下中 机型占比-->
        <div id="main7" class="block" style="z - index: 100;"></div>
        <!-- 下右 热门航线排行-->
        <div id="main9" class="block"></div>
    </div>

    <script type="text/javascript">
        // 初始化图表实例
        //运力预测
        var myChart = echarts.init(document.getElementById('main'));
        // 由于 main2 已经替换，不再需要初始化 myChart2
        // var myChart2 = echarts.init(document.getElementById('main2'));
        //交通事件
        var myChart3 = echarts.init(document.getElementById('main3'));
        //机型运力流量
        var myChart4 = echarts.init(document.getElementById('main4'));
        var myChart5 = echarts.init(document.getElementById('main5'));
        //航班类型统计
        var myChart6 = echarts.init(document.getElementById('main6'));
        var myChart7 = echarts.init(document.getElementById('main7'));
        //热门航线排行
        var myChart9 = echarts.init(document.getElementById('main9'));
        //  未来七天运力预测
        function initChart(dates, passengers, cargos) {
    var option = {
        title: {
            text: '未来七天运力预测',
            textStyle: {
                color: '#ffffff'  // 标题文字白色
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                let result = params[0].name; // 显示日期
                params.forEach(item => {
                    let label = item.seriesName === '国内客运' ? '人' : '吨';
                    result += `<br/>${item.marker} ${item.seriesName}: ${item.value}${label}`;
                });
                return result;
            }
        },
        legend: {
            data: ['国内客运', '国内货运'],
            textStyle: {
                color: '#ffffff'  // 图例文字白色
            },
            right: 20  // 关键调整：向右偏移20px（可根据实际情况增大数值）
        },
        xAxis: {
            type: 'category',
            data: dates,
            name: '',
            axisLabel: {
                color: '#ffffff'  // X轴刻度文字白色
            },
            nameTextStyle: {
                color: '#ffffff'  // X轴名称文字白色
            }
        },
        grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top: '20%',
                    containLabel: true
                },
        yAxis: {
            type: 'value',
            name: '',
            axisLabel: {
                show: false  // 隐藏Y轴刻度数值
            },
            nameTextStyle: {
                color: '#ffffff'  // Y轴名称文字白色（如需隐藏可设show:false）
            }
        },
        series: [
            {
                name: '国内客运',
                type: 'line',
                data: passengers,
                lineStyle: { color: '#e66922' },
                symbol: 'circle',
                itemStyle: { color: '#e66922' }
            },
            {
                name: '国内货运',
                type: 'line',
                data: cargos,
                lineStyle: { color: '#ff0000' },
                symbol: 'square',
                itemStyle: { color: '#ff0000' }
            }
        ]
    };
    myChart.setOption(option);
}

       function initChart3(destinations, scounts) {
    // 处理数据：每隔一个显示一个点，并处理长名称
    const processedData = [];
    const showLabels = [];

    destinations.forEach((name, index) => {
        // 每隔一个数据点显示一次
        if(index % 2 === 0) {
            processedData.push({
                value: scounts[index],
                fullName: name  // 保存完整名称用于提示
            });

            // 处理长名称：显示前4个字符
            showLabels.push({
                value: name.length > 4 ? name.substring(0, 4) + "..." : name,
                fullName: name
            });
        }
    });

    var option = {
        title: {
            text: '航线上线统计',
            textStyle: {
                color: '#fff',
                fontSize: 18
            }
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                // 显示完整名称
                return '收费站: ' + params[0].data.fullName + '<br/>' +
                       '上线人数: ' + params[0].value + '人';
            }
        },
        legend: {
            data: ['上线人数'],
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '25%',  // 增加底部空间
            top: '15%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: showLabels,
            axisLabel: {
                interval: 0,  // 显示所有标签
                rotate: 45,   // 旋转45度
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                },
                formatter: function(params) {
                    // 确保显示处理后的短名称
                    return params.value;
                }
            },
            axisTick: {
                alignWithLabel: true,
                interval: function(index) {
                    // 与数据点同步间隔
                    return index % 2 === 0;
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '人数',
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            }
        },
        dataZoom: [{
            type: 'slider',
            show: true,
            xAxisIndex: 0,
            start: 0,
            end: 100,
            bottom: '8%',
            height: 20,
            textStyle: {
    color: '#fff'  // 将字体颜色设为白色
},
            handleStyle: {
                color: '#00f2fe'
            },
            filterMode: 'filter'  // 过滤模式，只显示可见数据
        }],
        series: [{
            name: '上线人数',
            type: 'line',
            data: processedData,
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: true,  // 显示所有符号点
            itemStyle: {
                color: '#00f2fe'
            },
            lineStyle: {
                width: 3,
                shadowBlur: 10,
                shadowColor: 'rgba(0, 242, 254, 0.5)',
                shadowOffsetY: 5
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: 'rgba(79, 172, 254, 0.3)'},
                        {offset: 1, color: 'rgba(0, 242, 254, 0.1)'}
                    ]
                )
            }
        }]
    };

    myChart3.setOption(option);
}

        function initChart4(months4, air_types, air_counts) {
            var option = {
                title: {
                    text: '每月运力统计',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {},
                legend: {
                    data: air_types,
                    textStyle: {
                        color: '#fff'
                    },

                    right: 20
                },
                grid: {
    left: '5%', // 左侧边距从35px增至15%（根据数据长度调整）
    right: '5%',
    top: '20%',
    bottom: '5%',
    containLabel: true // 确保标签在网格内显示
},
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#e66922'
                        }
                    },
                    data: months4.map(function (month) {
                        return month + '月';
                    })
                }],
                yAxis: [{
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 14
                        },
                        textStyle: {
                            color: '#e66922'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    }
                }],
                series: []
            };

            for (var i = 0; i < air_types.length; i++) {
                var color = getRandomColor();
                option.series.push({
                    name: air_types[i],
                    type: 'line',
                    smooth: true,
                    lineStyle: {
                        normal: {
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(' + color.r + ',' + color.g + ',' + color.b + ', 0.3)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(' + color.r + ',' + color.g + ',' + color.b + ', 0)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')'
                        }
                    },
                    data: air_counts[i]
                });
            }

            function getRandomColor() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return { r: r, g: g, b: b };
            }

            myChart4.setOption(option);
        }


 function initChart5(destination, total_fee) {
 var barColors = ['	#FFB6C1', '	#DA70D6', '	#7B68EE', '	#87CEFA', '	#FFD700', '#FF7F50'];

        var option = {
          title: {
            text: '航线运力统计',
            textStyle: {
                        color: '#fff'
                    }
          },
          tooltip: {},
          legend: {
            data: ['收费量'],
             textStyle: {
                            color: '#fff'
                        }
          },
          xAxis: {
            data: destination,
           axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
          },
          yAxis: {
          axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
          },
           grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top: '20%',
                    containLabel: true
                },
          series: [
                    {
                        name: '收费量',
                        type: 'bar',
                        data: total_fee,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return barColors[params.dataIndex % barColors.length];
                                }
                            }
                        }
                    }
                ]
            };
        myChart5.setOption(option);
      }

        function initChart6(types, counts) {
            var option = {
                title: {
                    text: '航班类型统计',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type:'shadow'
                    }
                },
                legend: {
                    data: ['客运量(人)', '货运量(吨)'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: types,
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '运输量',
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: [
                    {
                        name: '客运量(人)',
                        type: 'bar',
                        data: counts.map(item => item[0])
                    },
                    {
                        name: '货运量(吨)',
                        type: 'bar',
                        data: counts.map(item => item[1])
                    }
                ]
            };
            myChart6.setOption(option);
        }

        function initChart7(data7) {
            var option = {
                title: {
                    text: '机型匹配分析',
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '5%',
                    right: '25%',
                    bottom: '5%',
                    top: '20%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(params) {
                      // params.percent 是自动计算的百分比
                      return `${params.name}<br/>
                          数量: ${params.value}<br/>
                          占比: ${params.percent}%`;
                  }
                },
                series: [{
                    type: 'pie',
                    data: data7
                }]
            };
            myChart7.setOption(option);
        }

        function initChart9(destination, total_fee) {
            var option = {
                title: {
                    text: '近30天热门航线TOP5',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type:'shadow'
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    max: 'dataMax',
                    interval: 1000,
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: destination,
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                series: [{
                    data: total_fee,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD'
                                ];
                                return colorList[params.dataIndex % colorList.length];
                            }
                        }
                    }
                }]
            };
            myChart9.setOption(option);
        }

        // 连接到 WebSocket 服务器
        var socket = io.connect('http://' + document.domain + ':' + location.port);

        // 监听来自服务器的 'update_chart' 事件
        socket.on('update_chart', function (msg) {
            initChart(msg.dates, msg. passengers,msg.cargos);
            // 由于 main2 已改变，不再传递相关数据
            console.log('收到的数据 - affairs:', msg.affair);
            console.log('收到的数据 - event_counts:', msg.event_count);
            //initChart3(msg.destinations, msg.scounts);
            initChart4(msg.months4, msg.air_types, msg.air_counts);
            //initChart5(msg.destination, msg.total_fee);
            initChart6(msg.aircraft_types, msg.aircraft_counts);
            initChart9(msg.destination, msg.total_fee);
        });

        socket.on('update_chart7', function (msg) {
            initChart7(msg);
        });

        // 新增监听 update_chart2 事件
        socket.on('update_chart2', function (data) {
            document.getElementById('eventCount').textContent = data.event_count;
        });

        // 页面加载时首次渲染图表
        window.onload = function () {
            initChart([], [], []);

            initChart7([]);
        }

        // 为中心 div 设置新的 option
        var map = echarts.init(document.getElementById('map'));
        var option = {
    graphic: {
        elements: [
            {
                type: 'text',
                // 修改 left 属性实现错开显示，根据实际调整具体数值
                left: '10%',
                top: 'center',
                style: {
                    // 修改 text 内容实现分行
                    text: '郑州航班\n\n运力投放大数据',
                    fontSize: 50,
                    fontWeight: 'bold',
                    lineDash: [0, 200],
                    lineDashOffset: 0,
                    fill: 'transparent',
                    stroke: '#000',
                    lineWidth: 1,
                    textAlign: 'left' // 设置文本左对齐
                },
                keyframeAnimation: {
                    duration: 5000,
                    loop: true,
                    keyframes: [
                        {
                            percent: 0.7,
                            style: {
                                fill: 'transparent',
                                lineDashOffset: 200,
                                lineDash: [200, 0]
                            }
                        },
                        {
                            // Stop for a while.
                            percent: 3,
                            style: {
                                fill: 'transparent'
                            }
                        },
                        {
                            percent: 1,
                            style: {
<!--                                fill: '',-->
                                stroke: '#fff'
                            }
                        }
                    ]
                }
            }
        ]
    }
};

        map.setOption(option);
    </script>
</body>

</html>